<template>
  <div class="chart-mod" ref="ChartGender"></div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref, Ref, watch} from "vue";
import { useECharts } from '@/hooks/web/useECharts'
import {genderTotal} from '@/api/data-center/recruitment-progress.ts'
const ChartGender = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(ChartGender as Ref<HTMLDivElement>)

const props = defineProps({
  navInfo:{
    type:Object,
    default:{
      navIndex:0,
      checkNav:[],
      dateValue:{}
    }
  },
  selectedCity:{
    type:Object,
    default:{}
  }
})

const watchObj = watch(
  () =>props.navInfo,() => {getChartData()},{deep: true}
)

const watchSelectedCity = watch(
  () =>props.selectedCity,() => {getChartData()},{deep: true}
)

onMounted(() => {
  getChartData()
})

onUnmounted(()=>{
  watchObj()
  watchSelectedCity()
})

// 接口返回的男女分布图表数据
const chartData = ref<any>(null)

// 请求信息标记（用于对比异步请求）
let reqMark = null
/**
 * 获取男女分布图表数据
 */
const getChartData = async ()=>{
  const index = props.navInfo.navIndex || 0
  const reqJson = {
    "country": index===1?props.navInfo.checkNav[1].value:'',
    "province": index===2?props.navInfo.checkNav[2].value:'',
    "area": index===2?props.selectedCity.value:'',
    "year":props.navInfo.dateValue.year,
    "begin":props.navInfo.dateValue.beginTime,
    "end":props.navInfo.dateValue.endTime,
  }
  reqMark = reqJson
  const res = await genderTotal(reqJson)
  chartData.value = res
  if(reqMark===reqJson){
    initChart(res)
  }
}

/**
 * 初始化图表
 * @param data 接口返回的男女分布图表数据
 */
const initChart = (data)=>{
  // 竖向y轴数据
  const yData = ['入职', '已转正', '已带课', '在岗未请长假', '在职', '待入职已签', '待入职待签','离职','劝退'];
  // 男性数据
  const maleData:Array<number> = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  // 女性数据
  const womenSData:Array<number> = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  data.forEach(item=>{
    if(!item.sexName)return
    const list = item.sexName==="男"?maleData:womenSData
    list[0] += Number(item.allEntryNum)
    list[1] += Number(item.regularNum)
    list[2] += Number(item.haveClassNum)
    list[3] += Number(item.onDutyNum)
    list[4] += Number(item.onJobNum)
    list[5] += Number(item.waitEntryNum)
    list[6] += Number(item.waitSignEntryNum)
    list[7] += Number(item.departNum)
    list[8] += Number(item.puaNum)
  })
  // 男女分布图表配置
  const optionUniversity = {
    tooltip: {
      show: true,
    },
    legend: {
      bottom: 0,
      icon: 'circle'
    },
    grid: [
      {
        show: false,
        left: '0',
        top: 0,
        bottom: 52,
        width: '16%',
      },
      {
        show: false,
        left: '20%',
        top: 0,
        bottom: 30,
        containLabel: true,
        width: '39%',
      },
      {
        show: false,
        right: '2%',
        top: 0,
        bottom: 30,
        containLabel: true,
        width: '39%',
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        show: false,
      },
      {
        gridIndex: 1,
        type: 'value',
        inverse: true,
        max:"",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: 'middle',
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color:"#A8C1F9"
          }
        }
      },
      {
        gridIndex: 2,
        type: 'value',
        max:"",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: 'middle',
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color:"#A8C1F9"
          }
        }
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: yData.map(function (value) {
          return {
            value: value,
            textStyle: {
              align: 'right',
            },
          };
        }),
        axisLabel: {
          fontSize: 14,
          interval: 0
        }
      },
      {
        gridIndex: 1,
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          margin: 8,
        },
        data: yData,
      },
      {
        gridIndex: 2,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        data: yData,
      },
    ],
    series: [
      {
        name: '男性',
        type: 'bar',
        barGap: 20,
        barWidth: 12,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 0, 0, 10],
            color:"#209EE4"
          },
        },
        data: maleData,
      },

      {
        name: '女性 ',
        type: 'bar',
        barGap: 20,
        barWidth: 12,
        xAxisIndex: 2,
        yAxisIndex: 2,
        itemStyle: {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color:"#E85B5B"
          },
        },
        data: womenSData,
      },
    ],
  };
  // x轴最大值
  const max = Math.max(...maleData,...womenSData)
  optionUniversity.xAxis[1].max = max
  optionUniversity.xAxis[2].max = max
  setOptions(optionUniversity)
}
</script>

<style scoped lang="less">
.chart-mod{
  width: 604px;
  height: 50%;
  padding-bottom: 32px;
}
</style>
